<template>
  <div>
    <el-dialog title="地图查看" :visible.sync="open" width="1050px">
      <div class="map" id="mapDiv" style="width: 1000px; height: 600px"></div>
    </el-dialog>
  </div>
</template>
<script>
import mapMixin from "@/mixins/lfMapMixin";
import dialogMixin from "../../../mixins/dialogMixin";

export default {
  name: "MapViewer",
  mixins: [mapMixin, dialogMixin],
  data() {
    return {
      marks: [],
    };
  },
  created() {
    this.zoom = 6;
  },
  methods: {
    init(locations) {
      this.open = true;
      this.$nextTick(() => {
        if (this.map == null) {
          this.initMap();
          this.setMarks(locations);
        }
      });
    },
    setMarks(locations) {
      if (this.marks.length > 0) {
        this.marks.forEach((m) => {
          m.remove();
        });
        this.marks = [];
      }
      if (locations.length > 0) {
        locations.forEach((location) => {
          this.marks.push(this.setMark(location));
        });
      }
    },
    setMark(location) {
      if (location.latitude == null || location.longitude == null) {
        return false;
      }
      var sContent =
        "<div style='margin:0px;'>" +
        "<div style='margin:10px; '>" +
        `<div>${location.label}</div>`;
      "</div>" + "</div>" + "</div>";
      var marker = this.addMarkerWithPopup(
        [location.latitude, location.longitude],
        sContent
      );
      this.marks.push(marker);
    },
  },
};
</script>
<style scoped lang="scss">
.location-search {
  display: flex;
  margin-bottom: 20px;
}

.location-search input {
  flex: 1;
}

.location-search button {
  width: 80px;
  margin-left: 20px;
}
</style>
